<template>
  <div class="search-result-card" @click="handleClick">
    <!-- 用户卡片 -->
    <div v-if="data.type === 'user'" class="user-card">
      <div class="user-avatar">
        <img :src="getMediaUrl(data.coverImage)" :alt="data.title" />
      </div>
      <div class="user-info">
        <h3 class="user-name" v-html="highlightText(data.title, highlightKeyword)"></h3>
        <p class="user-bio" v-html="highlightText(data.content, highlightKeyword)"></p>
        <div class="user-stats">
          <span class="stat-item">
            <el-icon><User /></el-icon>
            {{ formatCount(data.stats?.likeCount || 0) }} 关注者
          </span>
          <span class="stat-item">
            <el-icon><ChatDotRound /></el-icon>
            {{ formatCount(data.stats?.commentCount || 0) }} 问题
          </span>
          <span class="stat-item">
            <el-icon><Document /></el-icon>
            {{ formatCount(data.stats?.collectCount || 0) }} 文章
          </span>
        </div>
      </div>
      <div class="content-type">
        <el-tag type="primary" size="small">用户</el-tag>
      </div>
    </div>

    <!-- 问题卡片 -->
    <div v-else-if="data.type === 'question'" class="content-card">
      <div class="content-header">
        <div class="author-info" v-if="data.author">
          <img :src="getMediaUrl(data.author.avatar)" :alt="data.author.name" class="author-avatar" />
          <span class="author-name">{{ data.author.name }}</span>
        </div>
        <div class="content-type">
          <el-tag type="success" size="small">问题</el-tag>
        </div>
      </div>
      <h3 class="content-title" v-html="highlightText(data.title, highlightKeyword)"></h3>
      <p class="content-preview" v-html="highlightText(data.content, highlightKeyword)"></p>
      <div class="content-stats">
        <span class="stat-item">
          <el-icon><View /></el-icon>
          {{ formatCount(data.stats?.viewCount || 0) }}
        </span>
        <span class="stat-item">
          <el-icon><ChatDotRound /></el-icon>
          {{ formatCount(data.stats?.commentCount || 0) }} 回答
        </span>
        <span class="stat-item">
          <el-icon><Star /></el-icon>
          {{ formatCount(data.stats?.likeCount || 0) }}
        </span>
      </div>
    </div>

    <!-- 文章卡片 -->
    <div v-else-if="data.type === 'article'" class="content-card">
      <div class="content-header">
        <div class="author-info" v-if="data.author">
          <img :src="getMediaUrl(data.author.avatar)" :alt="data.author.name" class="author-avatar" />
          <span class="author-name">{{ data.author.name }}</span>
        </div>
        <div class="content-type">
          <el-tag type="warning" size="small">文章</el-tag>
        </div>
      </div>
      <div class="article-content">
        <div class="article-text">
          <h3 class="content-title" v-html="highlightText(data.title, highlightKeyword)"></h3>
          <p class="content-preview" v-html="highlightText(data.content, highlightKeyword)"></p>
          <div class="content-stats">
            <span class="stat-item">
              <el-icon><View /></el-icon>
              {{ formatCount(data.stats?.viewCount || 0) }}
            </span>
            <span class="stat-item">
              <el-icon><ChatDotRound /></el-icon>
              {{ formatCount(data.stats?.commentCount || 0) }}
            </span>
            <span class="stat-item">
              <el-icon><Star /></el-icon>
              {{ formatCount(data.stats?.likeCount || 0) }}
            </span>
            <span class="stat-item">
              <el-icon><Collection /></el-icon>
              {{ formatCount(data.stats?.collectCount || 0) }}
            </span>
          </div>
        </div>
        <div v-if="data.coverImage" class="article-cover">
          <img :src="getMediaUrl(data.coverImage)" :alt="data.title" />
        </div>
      </div>
    </div>

    <!-- 话题卡片 -->
    <div v-else-if="data.type === 'topic'" class="topic-card">
      <div class="topic-avatar">
        <img :src="getMediaUrl(data.coverImage)" :alt="data.title" />
      </div>
      <div class="topic-info">
        <h3 class="topic-name" v-html="highlightText(data.title, highlightKeyword)"></h3>
        <p class="topic-desc" v-html="highlightText(data.content, highlightKeyword)"></p>
        <div class="topic-stats">
          <span class="stat-item">
            <el-icon><User /></el-icon>
            {{ formatCount(data.stats?.likeCount || 0) }} Follow
          </span>
          <span class="stat-item">
            <el-icon><ChatDotRound /></el-icon>
            {{ formatCount(data.stats?.commentCount || 0) }} problem
          </span>
        </div>
      </div>
      <div class="content-type">
        <el-tag type="info" size="small">话题</el-tag>
      </div>
    </div>

    <!-- 专栏卡片 -->
    <div v-else-if="data.type === 'column'" class="column-card">
      <div class="column-avatar">
        <img :src="getMediaUrl(data.coverImage)" :alt="data.title" />
      </div>
      <div class="column-info">
        <h3 class="column-name" v-html="highlightText(data.title, highlightKeyword)"></h3>
        <p class="column-desc" v-html="highlightText(data.content, highlightKeyword)"></p>
        <div class="author-info" v-if="data.author">
          <img :src="getMediaUrl(data.author.avatar)" :alt="data.author.name" class="author-avatar" />
          <span class="author-name">{{ data.author.name }}</span>
        </div>
        <div class="column-stats">
          <span class="stat-item">
            <el-icon><User /></el-icon>
            {{ formatCount(data.stats?.likeCount || 0) }} 关注
          </span>
          <span class="stat-item">
            <el-icon><Document /></el-icon>
            {{ formatCount(data.stats?.commentCount || 0) }} 文章
          </span>
        </div>
      </div>
      <div class="content-type">
        <el-tag type="danger" size="small">专栏</el-tag>
      </div>
    </div>
  </div>
</template>

<script setup>
import {computed} from 'vue'
import {useRouter} from 'vue-router'
import {getMediaUrl} from '@/utils/media'

const router = useRouter()

// Props
const props = defineProps({
  data: {
    type: Object,
    required: true
  },
  highlightKeyword: {
    type: String,
    default: ''
  }
})

// 格式化数字
const formatCount = (count) => {
  if (count < 1000) {
    return count.toString()
  } else if (count < 10000) {
    return (count / 1000).toFixed(1) + 'k'
  } else {
    return (count / 10000).toFixed(1) + 'w'
  }
}

// 高亮关键词
const highlightText = (text, keyword) => {
  if (!keyword || !text) return text
  
  const regex = new RegExp(`(${keyword})`, 'gi')
  return text.replace(regex, '<mark class="highlight">$1</mark>')
}

// 点击处理
const handleClick = () => {
  const { type, id } = props.data
  
  switch (type) {
    case 'user':
      router.push(`/people/${id}`)
      break
    case 'question':
      router.push(`/question/${id}`)
      break
    case 'article':
      router.push(`/article/${id}`)
      break
    case 'topic':
      router.push(`/topic/${id}`)
      break
    case 'column':
      router.push(`/column/${id}`)
      break
    default:
      console.warn('未知的内容类型:', type)
  }
}
</script>

<style lang="scss" scoped>
.search-result-card {
  background: $background-color;
  border-radius: $border-radius-large;
  padding: $spacing-lg;
  margin-bottom: $spacing-md;
  box-shadow: $shadow-light;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: $shadow-medium;
    transform: translateY(-2px);
  }
}

// 用户卡片样式
.user-card {
  display: flex;
  align-items: center;
  gap: $spacing-md;
  position: relative;

  .user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .user-info {
    flex: 1;

    .user-name {
      font-size: 18px;
      font-weight: 600;
      color: $text-color;
      margin-bottom: 4px;
    }

    .user-bio {
      color: $text-secondary;
      margin-bottom: 8px;
      line-height: 1.4;
    }

    .user-stats {
      display: flex;
      gap: $spacing-md;
    }
  }
}

// 内容卡片样式（问题、文章）
.content-card {
  .content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: $spacing-sm;

    .author-info {
      display: flex;
      align-items: center;
      gap: 8px;

      .author-avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
      }

      .author-name {
        color: $text-secondary;
        font-size: 14px;
      }
    }
  }

  .content-title {
    font-size: 18px;
    font-weight: 600;
    color: $text-color;
    margin-bottom: 8px;
    line-height: 1.4;
  }

  .content-preview {
    color: $text-secondary;
    line-height: 1.5;
    margin-bottom: $spacing-sm;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .article-content {
    display: flex;
    gap: $spacing-md;

    .article-text {
      flex: 1;
    }

    .article-cover {
      width: 120px;
      height: 80px;
      border-radius: $border-radius-medium;
      overflow: hidden;
      flex-shrink: 0;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}

// 话题卡片样式
.topic-card, .column-card {
  display: flex;
  align-items: center;
  gap: $spacing-md;
  position: relative;

  .topic-avatar, .column-avatar {
    width: 50px;
    height: 50px;
    border-radius: $border-radius-medium;
    overflow: hidden;
    flex-shrink: 0;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .topic-info, .column-info {
    flex: 1;

    .topic-name, .column-name {
      font-size: 16px;
      font-weight: 600;
      color: $text-color;
      margin-bottom: 4px;
    }

    .topic-desc, .column-desc {
      color: $text-secondary;
      margin-bottom: 8px;
      font-size: 14px;
      line-height: 1.4;
    }

    .author-info {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;

      .author-avatar {
        width: 20px;
        height: 20px;
        border-radius: 50%;
      }

      .author-name {
        color: $text-secondary;
        font-size: 13px;
      }
    }

    .topic-stats, .column-stats {
      display: flex;
      gap: $spacing-md;
    }
  }
}

.content-stats{
  display: flex;
  gap: 30px;
}
// 统计信息样式
.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: $text-tertiary;
  font-size: 14px;

  .el-icon {
    font-size: 16px;
  }
}

// 内容类型标签
.content-type {
  position: absolute;
  top: 0;
  right: 0;
}

// 关键词高亮样式
:deep(.highlight) {
  background-color: #fff3cd;
  color: #856404;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 500;
}
</style>
